<!-- src/views/home homepage-changji.vue 2023/5/24  @wanghaoran -->
<template>
  <!--首页厂级-->
  <div style="background-color: #efefef;">
    <div class="wrapper">
      <div style="grid-column: 1 / 4;">
        <div class="whr-base-card flex-row flex-row-items-between">
          <div>值班领导：<span class="whr-primary-color">张三，李四</span></div>
          <div class="flex-row">
            <img class="margin-right-10" src="./components/assets/imgs/DM_20230524151238_019.png" height="16" width="16"
                 alt=""/>
            厂生产指挥中心：<span class="whr-primary-color">关于油气生产指挥系统（PCS）优化和提升需求征集的通知</span>
          </div>
          <div> 厂生产指挥中心：<span class="whr-primary-color">xxxx、xxxx、xxxx、xxxx</span></div>
        </div>
      </div>
      <!--产量运行-->
      <div>
        <div class="whr-base-card">
          <div class="flex-col">
            <div class="flex-row flex-row-items-between flex-col-end title-height">
              <div class="whr-base-card-main-title">产量运行</div>
              <div class="sub-title pointer">+详情</div>
            </div>
            <div class="flex-1 relative flex-col margin-15" style="">
              <img class="absolute-center" src="./components/assets/imgs/DM_20230524151238_014.png" alt="">
              <div class="flex-1 flex-row flex-row-items-between flex-col-start">
                <div class="">
                  <div class="flex-col flex-col-center whr-base-card-content-default-font">
                    <div>
                      <span class="whr-primary-color whr-big-number-size whr-number">1164</span>
                      <span class="margin-left-5">口</span>
                    </div>
                    <div>
                      <span>比昨：</span>
                      <span><arrow num="-2"></arrow></span>
                    </div>
                    <div>
                      <span>比当月平均：</span>
                      <span><arrow num="+32"></arrow></span>
                    </div>
                  </div>
                </div>
                <div class="">
                  <div class="flex-col flex-col-center whr-base-card-content-default-font">
                    <div>
                      <span class="whr-primary-color whr-big-number-size whr-number">11641</span>
                      <span class="margin-left-5">吨</span>
                    </div>
                    <div>
                      <span>比昨：</span>
                      <span><arrow num="-2"></arrow></span>
                    </div>
                    <div>
                      <span>比当月平均：</span>
                      <span><arrow num="+32"></arrow></span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="flex-1 flex-row flex-row-items-between flex-col-end">
                <div class="">
                  <div class="flex-col flex-col-center whr-base-card-content-default-font">
                    <div>
                      <span class="whr-primary-color whr-big-number-size whr-number">1164</span>
                      <span class="margin-left-5">口</span>
                    </div>
                    <div>
                      <span>比昨：</span>
                      <span><arrow num="-2"></arrow></span>
                    </div>
                    <div>
                      <span>比当月平均：</span>
                      <span><arrow num="+32"></arrow></span>
                    </div>
                  </div>
                </div>
                <div class="">
                  <div class="flex-col flex-col-center whr-base-card-content-default-font">
                    <div>
                      <span class="whr-primary-color whr-big-number-size whr-number">11641</span>
                      <span class="margin-left-5">吨</span>
                    </div>
                    <div>
                      <span>比昨：</span>
                      <span><arrow num="-2"></arrow></span>
                    </div>
                    <div>
                      <span>比当月平均：</span>
                      <span><arrow num="+32"></arrow></span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="" style="grid-row: 2 / 4;grid-column: 2 / 3;">
        <whr-base-card>
          <template #header>
            <div class="flex-row flex-row-items-between font-size-14" style="height: 50px">
              <div class="flex-row">
                <img src="./components/assets/imgs/DM_20230524151238_025.png" height="45" width="44" alt=""/>
                <div class="flex-row margin-left-5">
                  <div class="margin-right-20">
                    <div class="margin-bottom-5">监控总井：<span class="whr-primary-color">10000</span>口</div>
                    <div>监控开井：<span class="whr-primary-color">980</span>口</div>
                  </div>
                  <div>
                    <div class="margin-bottom-5">监控覆盖率：：<span class="whr-primary-color">94.1%</span></div>
                    <div>比昨：：
                      <arrow num="-8"></arrow>
                    </div>
                  </div>
                </div>
              </div>
              <div class="flex-row">
                <img src="./components/assets/imgs/DM_20230524151238_026.png" height="45" width="45" alt=""/>
                <div class="flex-row margin-left-5">
                  <div class="margin-right-20">
                    <div class="margin-bottom-5">监控总井：<span class="whr-primary-color">10000</span>口</div>
                    <div>监控开井：<span class="whr-primary-color">980</span>口</div>
                  </div>
                  <div>
                    <div class="margin-bottom-5">监控覆盖率：：<span class="whr-primary-color">94.1%</span></div>
                    <div>比昨：：
                      <arrow num="+11"></arrow>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <template #content>
            <fullscreen v-model="fullscreenValue" class="full">
              <div style="height: 100%;background-image: linear-gradient(180deg, #CFF4FF 0%, #EAFBFF 100%);position: relative">
                <div class="" style="position: absolute;top:10px;right: 10px">
                  <el-icon class="pointer" @click="fullscreenValue = !fullscreenValue">
                    <FullScreen/>
                  </el-icon>
                </div>
              </div>
            </fullscreen>

          </template>
        </whr-base-card>
      </div>
      <!--作业动态-->
      <div class="">
        <whr-base-card main-title="作业动态">
          <template #subTitle>
            <whr-tab :tab-data="ZYDTTabData" v-model="ZYDTTab_currentData"></whr-tab>
          </template>
          <template #content>
            <div class="flex-col" v-show="ZYDTTab_currentData === '油井'">
              <div class="flex-row flex-row-items-around">
                <div class="text-center">
                  <div class="font-size-14">今日交井</div>
                  <div class="whr-number whr-primary-color whr-big-number-size">8</div>
                  <div class="font-size-12">比昨：
                    <arrow num="-12"></arrow>
                  </div>
                </div>
                <div class="text-center">
                  <div class="font-size-14">月交井</div>
                  <div class="whr-number whr-primary-color whr-big-number-size">18</div>
                  <div class="font-size-12">比月均：
                    <arrow num="-12"></arrow>
                  </div>
                </div>
                <div class="text-center">
                  <div class="font-size-14">年交井</div>
                  <div class="whr-number whr-primary-color whr-big-number-size">218</div>
                  <div class="font-size-12">比去年：
                    <arrow num="-12"></arrow>
                  </div>
                </div>
              </div>
              <el-divider/>
              <div class="flex-row flex-row-items-around">
                <div class="text-center">
                  <div class="font-size-14">待作业</div>
                  <div class="whr-number whr-primary-color whr-big-number-size">8</div>
                  <div class="font-size-12">比昨：
                    <arrow num="-12"></arrow>
                  </div>
                </div>
                <div class="text-center">
                  <div class="font-size-14">正作业</div>
                  <div class="whr-number whr-primary-color whr-big-number-size">18</div>
                  <div class="font-size-12">比月均：
                    <arrow num="-12"></arrow>
                  </div>
                </div>
                <div class="text-center">
                  <div class="font-size-14">作业开井</div>
                  <div class="whr-number whr-primary-color whr-big-number-size">218</div>
                  <div class="font-size-12">比去年：
                    <arrow num="-12"></arrow>
                  </div>
                </div>
              </div>
            </div>
            <div class="flex-col" v-show="ZYDTTab_currentData === '水井'">
              <div class="flex-row flex-row-items-around">
                <div class="text-center">
                  <div class="font-size-14">今日交井</div>
                  <div class="whr-number whr-primary-color whr-big-number-size">8</div>
                  <div class="font-size-12">比昨：
                    <arrow num="-1"></arrow>
                  </div>
                </div>
                <div class="text-center">
                  <div class="font-size-14">月交井</div>
                  <div class="whr-number whr-primary-color whr-big-number-size">18</div>
                  <div class="font-size-12">比月均：
                    <arrow num="-18"></arrow>
                  </div>
                </div>
                <div class="text-center">
                  <div class="font-size-14">年交井</div>
                  <div class="whr-number whr-primary-color whr-big-number-size">218</div>
                  <div class="font-size-12">比去年：
                    <arrow num="+12"></arrow>
                  </div>
                </div>
              </div>
              <el-divider/>
              <div class="flex-row flex-row-items-around">
                <div class="text-center">
                  <div class="font-size-14">待作业</div>
                  <div class="whr-number whr-primary-color whr-big-number-size">8</div>
                  <div class="font-size-12">比昨：
                    <arrow num="+3"></arrow>
                  </div>
                </div>
                <div class="text-center">
                  <div class="font-size-14">正作业</div>
                  <div class="whr-number whr-primary-color whr-big-number-size">18</div>
                  <div class="font-size-12">比月均：
                    <arrow num="-43"></arrow>
                  </div>
                </div>
                <div class="text-center">
                  <div class="font-size-14">作业开井</div>
                  <div class="whr-number whr-primary-color whr-big-number-size">218</div>
                  <div class="font-size-12">比去年：
                    <arrow num="+11"></arrow>
                  </div>
                </div>
              </div>
            </div>
            <div class="flex-col" v-show="ZYDTTab_currentData === '气井'">
              <div class="flex-row flex-row-items-around">
                <div class="text-center">
                  <div class="font-size-14">今日交井</div>
                  <div class="whr-number whr-primary-color whr-big-number-size">8</div>
                  <div class="font-size-12">比昨：
                    <arrow num="+2"></arrow>
                  </div>
                </div>
                <div class="text-center">
                  <div class="font-size-14">月交井</div>
                  <div class="whr-number whr-primary-color whr-big-number-size">18</div>
                  <div class="font-size-12">比月均：
                    <arrow num="+15"></arrow>
                  </div>
                </div>
                <div class="text-center">
                  <div class="font-size-14">年交井</div>
                  <div class="whr-number whr-primary-color whr-big-number-size">218</div>
                  <div class="font-size-12">比去年：
                    <arrow num="-12"></arrow>
                  </div>
                </div>
              </div>
              <el-divider/>
              <div class="flex-row flex-row-items-around">
                <div class="text-center">
                  <div class="font-size-14">待作业</div>
                  <div class="whr-number whr-primary-color whr-big-number-size">8</div>
                  <div class="font-size-12">比昨：
                    <arrow num="-2"></arrow>
                  </div>
                </div>
                <div class="text-center">
                  <div class="font-size-14">正作业</div>
                  <div class="whr-number whr-primary-color whr-big-number-size">18</div>
                  <div class="font-size-12">比月均：
                    <arrow num="+2"></arrow>
                  </div>
                </div>
                <div class="text-center">
                  <div class="font-size-14">作业开井</div>
                  <div class="whr-number whr-primary-color whr-big-number-size">218</div>
                  <div class="font-size-12">比去年：
                    <arrow num="-22"></arrow>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </whr-base-card>
      </div>
      <!--预报警运行-->
      <div class="">
        <whr-base-card main-title="预报警运行" sub-title="+配置"
                       @on-sub-title-click="YXBJ_subTitleClick">
          <template #content>
            <div class="flex-col">
              <div class="flex-row flex-row-items-evenly height-auto">
                <div class="text-center">
                  <div>参数超限报警</div>
                  <div><span class="whr-big-number-size whr-primary-color whr-number">8</span></div>
                  <div class="font-size-12">
                    <span>比昨：</span>
                    <span><arrow num="-2"></arrow></span>
                  </div>
                  <div class="font-size-12">
                    <span>比当月平均：</span>
                    <span><arrow num="-2"></arrow></span>
                  </div>
                </div>
                <div class="text-center">
                  <div>事件预警</div>
                  <div><span class="whr-big-number-size whr-primary-color whr-number">8</span></div>
                  <div class="font-size-12">
                    <span>比昨：</span>
                    <span><arrow num="-2"></arrow></span>
                  </div>
                  <div class="font-size-12">
                    <span>比当月平均：</span>
                    <span><arrow num="-2"></arrow></span>
                  </div>
                </div>
              </div>
              <el-divider class="margin-bottom-10 margin-top-20"/>
              <div class="flex-1 flex-col">
                <div class="flex-row flex-row-items-evenly height-auto margin-bottom-15">
                  <div class="font-size-12 flex-row">
                    <el-icon class="whr-green">
                      <CaretBottom/>
                    </el-icon>
                    <span class="margin-left-5">采油厂最高</span>
                  </div>
                  <div class="font-size-12 flex-row">
                    <el-icon class="whr-red">
                      <CaretBottom/>
                    </el-icon>
                    <span class="margin-left-5">分公司最高</span>
                  </div>
                </div>
                <div class="flex-1 flex-col">
                  <div class="flex-row">
                    <span>确认及时率：</span>
                    <div class="flex-1">
                      <whr-propress :percentData="[74.3,66.5,80]"></whr-propress>
                    </div>
                  </div>
                  <div class="flex-row">
                    <span>处置及时率：</span>
                    <div class="flex-1">
                      <whr-propress :percentData="[60.3,45.5,77]"></whr-propress>
                    </div>
                  </div>
                  <div class="flex-row">
                    <span>处置符合率：</span>
                    <div class="flex-1">
                      <whr-propress :percentData="[55.9,70.2,86]"></whr-propress>
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </template>
        </whr-base-card>
      </div>
      <!--钻井动态-->
      <div class="">
        <whr-base-card main-title="钻井动态">
          <template #content>
            <div class="flex-col">
              <div class="flex-row flex-row-items-evenly height-auto  margin-bottom-15">
                <div class="text-center">
                  <div>钻前准备</div>
                  <div class="whr-number whr-primary-color whr-big-number-size">8</div>
                </div>
                <div class="text-center">
                  <div>正钻井</div>
                  <div class="whr-number whr-primary-color whr-big-number-size">18</div>
                </div>
              </div>
              <div class="flex-1 flex-row flex-row-items-evenly flex-col-start gap-10">
                <div class="JRWC-list">
                  <div class="JRWC-list-title">今日完井</div>
                  <!--<div class="JRWC-list-ul" >-->
                  <!--  <div class="JRWC-list-li">BB60EC40</div>-->
                  <!--  <div class="JRWC-list-li">BB60EC41</div>-->
                  <!--  <div class="JRWC-list-li">BB60EC42</div>-->
                  <!--  <div class="JRWC-list-li">BB60EC43</div>-->
                  <!--  <div class="JRWC-list-li">BB60EC44</div>-->
                  <!--  <div class="JRWC-list-li">BB60EC45</div>-->
                  <!--</div>-->
                  <vue3-seamless-scroll class="JRWC-list-ul" :list="ZJDT_JRWC_LIST"
                                        :hover="true" :limitScrollNum="5" :step="0.5"
                                        :singleHeight="36"
                  >
                    <div class="JRWC-list-li" v-for="(item,index) in ZJDT_JRWC_LIST" :key="index">{{ item }}</div>
                  </vue3-seamless-scroll>
                </div>
                <div class="JRWC-list">
                  <div class="JRWC-list-title">今日投产</div>
                  <vue3-seamless-scroll class="JRWC-list-ul" :list="ZJDT_JRWC_LIST"
                                        :hover="true" :limitScrollNum="5" :step="0.5"
                                        :singleHeight="36"
                  >
                    <div class="JRWC-list-li" v-for="(item,index) in ZJDT_JRWC_LIST" :key="index">{{ item }}</div>
                  </vue3-seamless-scroll>
                </div>
              </div>
            </div>
          </template>
        </whr-base-card>
      </div>
      <!--运维管理-->
      <div class="">
        <whr-base-card main-title="运维管理" content-style="ywgl-content-style">
          <template #content>
            <div>
              <div class="text-center font-size-14 blod">设备工单</div>
              <div class="flex-row flex-row-items-around">
                <div class="text-center">
                  <img src="./components/assets/imgs/DM_20230524151238_020.png" height="36" width="31" alt=""/>
                  <div>今日工单</div>
                  <div><span class="whr-primary-color whr-number whr-big-number-size">23</span></div>
                </div>
                <div class="text-center">
                  <img src="./components/assets/imgs/DM_20230524151238_020.png" height="36" width="31" alt=""/>
                  <div>本月工单</div>
                  <div><span class="whr-primary-color whr-number whr-big-number-size">187</span></div>
                </div>
                <div class="text-center">
                  <img src="./components/assets/imgs/DM_20230524151238_020.png" height="36" width="31" alt=""/>
                  <div>全年工单</div>
                  <div><span class="whr-primary-color whr-number whr-big-number-size">2387</span></div>
                </div>
              </div>
            </div>
            <el-divider class="margin-bottom-10 margin-top-20"/>
            <div>
              <div class="text-center font-size-14 blod">软件工单</div>
              <div class="flex-row flex-row-items-around">
                <div class="text-center">
                  <img src="./components/assets/imgs/DM_20230524151238_020.png" height="36" width="31" alt=""/>
                  <div>今日工单</div>
                  <div><span class="whr-primary-color whr-number whr-big-number-size">23</span></div>
                </div>
                <div class="text-center">
                  <img src="./components/assets/imgs/DM_20230524151238_020.png" height="36" width="31" alt=""/>
                  <div>本月工单</div>
                  <div><span class="whr-primary-color whr-number whr-big-number-size">187</span></div>
                </div>
                <div class="text-center">
                  <img src="./components/assets/imgs/DM_20230524151238_020.png" height="36" width="31" alt=""/>
                  <div>全年工单</div>
                  <div><span class="whr-primary-color whr-number whr-big-number-size">2387</span></div>
                </div>
              </div>
            </div>
          </template>
        </whr-base-card>
      </div>
      <!--指标运行-->
      <div class="">
        <whr-base-card main-title="指标运行" content-style="zbyx-content-style">
          <template #content>
            <div class="full" ref="ZBYXRef"></div>
          </template>
        </whr-base-card>
      </div>
      <!--应急管理-->
      <div class="">
        <central-img-card mainTitle="应急管理"
                          :central-img="yjglImgUrl"
                          center-style="YJGL-center-style"
        >
          <template #center>
            <div>
              <div>应急</div>
              <div>启动</div>
            </div>
          </template>
          <template #leftTop>
            <div class="flex-col flex-col-center whr-base-card-content-default-font margin-left-15">
              <div class="font-size-14">
                应急预案
              </div>
              <div class="whr-primary-color whr-big-number-size whr-number">
                45
              </div>
            </div>
          </template>
          <template #rightTop>
            <div class="flex-col flex-col-center whr-base-card-content-default-font margin-right-15">
              <div class="font-size-14">
                应急案例
              </div>
              <div class="whr-primary-color whr-big-number-size whr-number">
                21
              </div>
            </div>
          </template>
          <template #leftBottom>
            <div class="flex-col flex-col-center whr-base-card-content-default-font margin-left-15">
              <div class="font-size-14">
                应急物资
              </div>
              <div class="whr-primary-color whr-big-number-size whr-number">
                32
              </div>
            </div>
          </template>
          <template #rightBottom>
            <div class="flex-col flex-col-center whr-base-card-content-default-font margin-right-15">
              <div class="font-size-14">
                应急专家
              </div>
              <div class="whr-primary-color whr-big-number-size whr-number">
                28
              </div>
            </div>
          </template>
        </central-img-card>
      </div>
      <!--电子巡检-->
      <div class="">
        <whr-base-card main-title="电子巡检" content-style="">
          <template #subTitle>
            <whr-tab :tab-data="ZYDTTabData" v-model="ZYDTTab_currentData"></whr-tab>
          </template>
          <template #content>
            <div class="margin-top-10">
              <div class="flex-row flex-row-items-around height-auto">
                <div class="text-center">
                  <div>已完成</div>
                  <div class="whr-big-number-size whr-primary-color whr-number">4</div>
                </div>
                <div class="text-center">
                  <div>发现问题</div>
                  <div class="whr-big-number-size whr-red whr-number">5</div>
                </div>
              </div>
              <div class="margin-top-10">
                <dzxj-item :completed="true"></dzxj-item>
                <dzxj-item :completed="true"></dzxj-item>
                <dzxj-item :completed="false"></dzxj-item>
              </div>
            </div>
          </template>
        </whr-base-card>
      </div>
      <!--报警统计-->
      <div class="">
        <whr-base-card main-title="报警统计" content-style="zbyx-content-style">
          <template #content>
            <div class="full" ref="BJTJRef"></div>
          </template>
        </whr-base-card>
      </div>
      <!--频发报警-->
      <div class="">
        <whr-base-card main-title="频发报警" content-style="zbyx-content-style">
          <template #subTitle>
            <div class="flex-row">
              <whr-tab :tab-data="PFBJTabData" v-model="PFBJTab_currentData"></whr-tab>
              <div class="margin-left-20 pointer">+详情</div>
            </div>

          </template>
          <template #content>
            <div class="full" ref="PFBJRef"></div>
          </template>
        </whr-base-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import Arrow from "./components/arrow/Arrow.vue"
import WhrBaseCard from "./components/WhrBaseCard/WhrBaseCard.vue";
import CentralImgCard from "./components/CentralImgCard/CentralImgCard.vue";
import WhrTab from "./components/WhrTab/WhrTab.vue";
import yjglImgUrl from "./components/assets/imgs/DM_20230524151238_023.png"
import {onMounted, ref} from "vue";
import {
  Star, CaretBottom, FullScreen
} from '@element-plus/icons-vue'
import * as echarts from "echarts";
import WhrPropress from "./components/WhrProgress/WhrPropress.vue";
import {Vue3SeamlessScroll} from "vue3-seamless-scroll";
import DzxjItem from "./components/DzxjItem/DzxjItem.vue";

const BJTJRef = ref(null)
const PFBJRef = ref(null)
const ZYDTTabData = [
  {
    label: "油井",
    value: "油井"
  },
  {
    label: "水井",
    value: "水井"
  },
  {
    label: "气井",
    value: "气井"
  },
]
const PFBJTabData = [
  {
    label: "报警对象",
    value: "报警对象"
  },
  {
    label: "报警类型",
    value: "报警类型"
  },
]
const ZYDTTab_currentData = ref('油井')
const PFBJTab_currentData = ref('报警对象')
const ZBYXRef = ref(null)
const YXBJ_subTitleClick = () => {
  console.log('点击副标题')
}
const ZJDT_JRWC_LIST = ref(
    ['BB60EC40', 'BB60EC41', 'BB60EC42', 'BB60EC43', 'BB60EC44', 'BB60EC45']
)
const ZBYX_chart_options = ref(
    {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      legend: {
        data: ['采油厂最高', '分公司最高']
      },
      grid: {
        top: '15%',
        left: '7%',
        right: '2%',
        bottom: '9%',
        // containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
          },
          data: ['油井开井率', '采油时率', '平衡合格率', '抽油机井泵效', '水井开井率', '注水时率', '注水系统效率', '注水干压达标率'],
          axisPointer: {
            type: 'shadow'
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
        },

      ],
      series: [
        {
          name: '指标运行',
          type: 'bar',
          barWidth: '33',
          itemStyle: {
            color: '#73A0FA',
          },
          data: [
            230, 450, 388, 745, 890, 740, 410, 743,
          ]
        },
        {
          name: '采油厂最高',
          type: 'line',
          itemStyle: {
            color: '#00B696',
          },
          showSymbol: false,
          data: [280, 480, 408, 805, 930, 780, 450, 783,]
        },
        {
          name: '分公司最高',
          type: 'line',
          itemStyle: {
            color: '#FF5353',
          },
          showSymbol: false,
          data: [220, 510, 308, 855, 780, 630, 550, 843,]
        }
      ]
    }
)
const BJTJ_chart_options = ref(
    {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      legend: {
        data: ['采油厂最高', '分公司最高']
      },
      grid: {
        top: '15%',
        left: '7%',
        right: '2%',
        bottom: '9%',
        // containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          axisTick: {
            // 坐标轴刻度相关设置。
            show: true,
            // interval: 0,
            alignWithLabel:true, // 刻度和label居中对齐,类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
            boundaryGap:true, // 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
            // 非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效。 示例：
            // boundaryGap: ['20%', '20%']
          },
          axisLabel: {
            // 坐标轴刻度的显示间隔，在类目轴中有效。默认同 axisLabel.interval 一样。
            // 默认会采用标签不重叠的策略间隔显示标签。
            // 可以设置成 0 强制显示所有标签。
            // 如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
            // 可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：
            interval: 0,
          },
          data: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00'],
          axisPointer: {
            type: 'shadow'
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
        },

      ],
      series: [
        {
          name: '采油厂最高',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          itemStyle: {
            color: '#5B8FF9',
            borderColor: "#fff",
            borderWidth: 2,
          },
          symbolSize: 8,
          showSymbol: true,
          data: [400, 700, 408, 805, 930, 780, 650,]
        },
        {
          name: '分公司最高',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          itemStyle: {
            color: '#5AD8A6',
            borderColor: "#fff",
            borderWidth: 2,
          },
          symbolSize: 8,
          showSymbol: true,
          data: [220, 510, 308, 505, 780, 630, 550,]
        }
      ]
    }
)
const PFBJ_chart_options = ref(
    {
      // tooltip: {
      //   trigger: 'axis',
      //   axisPointer: {
      //     type: 'cross',
      //     crossStyle: {
      //       color: '#999'
      //     }
      //   }
      // },
      grid: {
        top: '10%',
        left: '15%',
        right: '10%',
        bottom: '5%',
        // containLabel: true
      },
      xAxis: [
        {
          type: 'value',
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitLine: {show: false},
          axisPointer: {
            type: 'shadow'
          }
        },

      ],
      yAxis: [
        {
          type: 'category',
          data: ['井号6', '井号5', '井号4', '井号3', '井号2', '井号1'],
          axisTick: {
            show: false,
          },
          axisLine: {show: false},
          splitLine: {show: false},
          axisLabel: {
            interval: 0,
          },
        },
        {
          type: 'category',
          data: [400, 700, 408, 805, 930, 780,],
          axisTick: {
            show: false,
          },
          axisLine: {show: false},
          splitLine: {show: false},
          axisLabel: {
            interval: 0,
            color: '#5D5D5D',
          },
        }
      ],
      series: [
        {
          name: '采油厂最高',
          type: 'bar',
          itemStyle: {
            color: '#719ef8',
          },
          barWidth: '35%',
          data: [400, 700, 408, 805, 930, 780,]
        },
        {
          data: [0, 0, 0, 0, 0, 0],
          type: 'bar',
          barWidth: '60%',
          showBackground: true,
          barGap: '-140%'
        }
      ]
    }
)
const fullscreenValue = ref(true)

onMounted(() => {
  console.log('mounted')
  // 指标运行图
  const ZBYX_chart = echarts.init(ZBYXRef.value)
  ZBYX_chart.setOption(ZBYX_chart_options.value)
  // 频发报警
  const PFBJ_chart = echarts.init(PFBJRef.value)
  PFBJ_chart.setOption(PFBJ_chart_options.value)
  // 报警统计
  const BJTJ_chart = echarts.init(BJTJRef.value)
  BJTJ_chart.setOption(BJTJ_chart_options.value)
})
</script>

<style scoped>
@import url("./components/assets/css/index.css");

.wrapper {
  display: grid;
  grid-template-columns: 407px auto 407px;
  /*  声明行间距和列间距  */
  grid-gap: 15px;
  /*  声明行的高度  */
  grid-template-rows: 69px 289px 315px 312px 312px;
}

:deep(.ywgl-content-style) {
  margin-top: 5px !important;
}

:deep(.zbyx-content-style) {
  margin: 0;
}

.whr-green {
  color: #00B696;
}

.whr-red {
  color: #FF5353;
}

:deep(.YJGL-center-style) {
  height: 100px;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #477CFB;
  font-size: 14px;
}

.JRWC-list {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.JRWC-list-title {
  height: 30px;
  background: #EFEFEF;
  font-size: 14px;
  color: #5D5D5D;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.JRWC-list-ul {
  height: 144px;
  overflow: hidden;
}

.JRWC-list-li {
  height: 35px;
  font-size: 14px;
  color: #4781FF;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #E2E2E2;
}
</style>
